<!--
 - Copyright 2022. Huawei Technologies Co., Ltd. All rights reserved.

 - Licensed under the Apache License, Version 2.0 (the "License");
 - you may not use this file except in compliance with the License.
 - You may obtain a copy of the License at

 -   http://www.apache.org/licenses/LICENSE-2.0

 - Unless required by applicable law or agreed to in writing, software
 - distributed under the License is distributed on an "AS IS" BASIS,
 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 - See the License for the specific language governing permissions and
 - limitations under the License.
 -->

<!-- 左文字右图标通用模块 -->
<template>
    <div class="middle_container">
        <div class="middle_root"
            :style="{ 'background-color': background }"
            @click.stop="showGearsClick"
        >
            <span class="middle_one"
                :class="{grayStyle: !connected || strengthGray || !runStatus, 'rtl-l text-r': $rtl}"
            >{{ info.msg }}</span>
            <img class="middle_two"
                :class="{grayStyle: !connected || strengthGray || !runStatus, 'rtl-l': $rtl}"
                :src="info.img" />
        </div>
        <SelectModule 
            :showGears="showGears"
            :optionList="optionList"
            v-model="showGears"
            :selectStyle="selectStyle"
            @choose="choose"
            :strength="strength"
            :massageTimer="massageTimer"
        />
    </div>
</template>

<script>
import SelectModule from "@/components/SelectModule.vue";
import { mapState } from 'vuex';
export default {
    components: {
        SelectModule
    },
    props: {
        info: {
            type: Object,
            default: {
                msg: "",
                img: require("@/assets/image/ic_public_right.svg"),
            },
        },
        strength: { //力度按钮
            type: Boolean,
            default: false
        },
        optionList: {
            type: Array
        },
        massageTimer: { //按摩定时
            type: Boolean,
            default: false
        }
    },
    computed: {
        ...mapState([ 'connectStatus', 'connected', 'modeIndex', 'deviceId', 'runStatus' ]),
        strengthGray(){     // 力度是否可点击
            return this.strength && this.modeIndex != '0';
        }
    },
    data() {
        return {
            background: window.isDark ? "#202224" : "#FFFFFF",
            showGears: false, //下拉框显示
            selectStyle:{
                background: window.isDark ? '#202224' : '#FFFFFF',
            },
        };
    },
    methods: {
        showGearsClick(){
            if(!this.connected || !this.runStatus || this.strength && this.modeIndex != '0') return;
            this.showGears = !this.showGears;
        },

        /**
         * 下拉框选择
         * 不同模块传入不同指令、uuId
         */
        choose(i){
            const { globalData, strength, massageTimer, gearsOption, timerOption } = this;
            if(strength){  // 档位
                gearsOption(i, globalData.SERVICE_ID, globalData.CHARACTERISTIC_ID);
            }else if(massageTimer){  // 按摩定时
                timerOption(i, globalData.SERVICE_ID, globalData.CHARACTERISTIC_ID);
            }
            
        },

        // 档位
        gearsOption(index, serviceId, characteristicId){
            const { deviceId, directiveData, jsInjection } = this;
            let data = '';
            switch(index){
                case 0:
                    // 一档
                    data = directiveData.first_gear_directive;
                    break;
                case 1:
                    // 二档
                    data = directiveData.second_gear_directive;
                    break;
                case 2:
                    // 三档
                    data = directiveData.third_gear_directive;
                    break;
                case 3:
                    // 四档
                    data = directiveData.fourth_gear_directive;
                    break;
            };
            jsInjection.writeDirective( deviceId, serviceId, characteristicId, data);
        },

        // 按摩定时
        timerOption(index, serviceId, characteristicId){
            const { deviceId, directiveData, jsInjection } = this;
            let data = '';
            switch(index){
                case 0:
                    // 5分钟
                    data = directiveData.one_timer_directive; //一分钟测试，需要替换成五分钟指令
                    break;
                case 1:
                    // 10分钟
                    data = directiveData.ten_timer_directive;
                    break;
                case 2:
                    // 15分钟
                    
                    break;
                case 3:
                    // 20分钟
                    
                    break;
                case 4:
                    // 25分钟
                    
                    break;
            };
            jsInjection.writeDirective( deviceId, serviceId, characteristicId, data);
        }
    }
};
</script>

<style scoped>
    .middle_container{
        position: relative;
        width: 100%;
    }

    .middle_root {
        height: 6.4rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 1.6rem;
    }

    .middle_one {
        width: auto;
        font-size: 1.6rem;
        margin-left: 1.6rem;
    }

    .middle_two {
        width: 2.4rem;
        height: 2.4rem;
        margin-right: 1.6rem;
        margin-left: auto;
    }
</style>
